<template>
  <el-form
    ref="form"
    :class="className"
    :model="data"
    class="padding"
    :rules="rules"
    :disabled="disabled"
    :label-width="labelWidth"
  >
    <el-row style="width: 100%">
      <el-col class="flex_wrap_start_start">
        <el-form-item
          v-for="(item, index) in getConfigList()"
          :key="index"
          :prop="item.value"
          :label="item.labelTip ? '' : item.label + '：'"
          :class="item.className"
        >
          <!--字典单选框-->
          <radio-model
            v-if="item.type === 'radio-model' && !disabled"
            v-model="data[item.value]"
            :type-code="item.code"
            :disabled="item.disabled"
            :border="true"
            @change="handleEvent(item.event, data[item.value])"
          />
          <!-- 辅助文字/分数评价 -->
          <el-rate
            v-if="item.type === 'showText'"
            v-model="data[item.value]"
            show-text
            :texts="item.texts"
            :colors="colors"
            :text-color="textColor"
          >
          </el-rate>
          <!-- icon评价 -->
          <el-rate
            v-if="item.type === 'icon'"
            v-model="data[item.value]"
            :icon-classes="iconClasses"
            void-icon-class="icon-rate-face-off"
            :colors="colors"
          >
          </el-rate>

          <!-- 文本输入框 -->
          <el-input
            v-if="item.type === 'textarea' && !disabled && !item.isSpecialInput"
            v-model.trim="data[item.value]"
            :type="item.type"
            :disabled="item.disabled"
            :maxlength="item.maxlength || 200"
            :placeholder="getPlaceholder(item)"
            :autosize="item.autosize || { minRows: 1, maxRows: 10 }"
            @focus="handleEvent(item.event)"
            @input="(e) => (data[item.value] = validSe(e))"
          />
          <el-input
            v-if="item.type === 'textarea' && !disabled && item.isSpecialInput"
            v-model.trim="data[item.value]"
            :type="item.type"
            :disabled="item.disabled"
            :maxlength="item.maxlength || 200"
            :placeholder="getPlaceholder(item)"
            :autosize="item.autosize || { minRows: 1, maxRows: 10 }"
            @focus="handleEvent(item.event)"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="Rate">
import SelectModel from '../SelectModel/index'
import RadioModel from '../ModelRadio'
import CityModel from '../CityModel/index'
import NewUpload from '../NewUpload/index'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  // 自定义类名
  className: {
    type: String,
    default: '',
  },
  imageField: {
    type: Object,
    default: function () {
      return {}
    },
  },
  // 表单数据
  data: {
    type: Object,
    default: function () {
      return {}
    },
  },
  // 相关字段
  fieldList: {
    type: Array,
    default: function () {
      return []
    },
  },
  // 验证规则
  rules: {
    type: Object,
    default: function () {
      return {}
    },
  },
  // 相关的列表
  listTypeInfo: {
    type: Object,
    default: function () {
      return {}
    },
  },
  // label宽度
  labelWidth: {
    type: String,
    default: '110px',
  },
  refObj: {
    type: Object,
    default: function () {
      return {}
    },
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  //颜色
  colors: {
    type: Array,
    default: function () {
      return ['#99A9BF', '#F7BA2A', '#FF9900']
    },
  },
  //辅助文字颜色
  textColor: {
    type: String,
    default: '#ff9900',
  },
  //icon
  iconClasses: {
    type: Array,
    default: function () {
      return ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']
    },
  },
})

watch(
  () => props.data,
  (val) => {
    // 将form实例返回到父级
    emits('update:refObj', proxy.$refs.form)
    proxy.$refs.form.clearValidate()
  },
  {
    deep: true, // 深度监听
  }
)

function upDateUpload(fileList) {
  props.data[props.imageField.value] = fileList
}
// 获取字段列表
function getConfigList() {
  let fieldList = props.fieldList.filter(
    (item) =>
      !item.hasOwnProperty('show') || (item.hasOwnProperty('show') && item.show)
  )
  if (!props.disabled) {
    return fieldList.filter((item) => !item.showDetail)
  } else {
    fieldList.forEach(
      (item) => (item.value = item.detailValue ? item.detailValue : item.value)
    )
  }
  return fieldList
}
// 得到placeholder的显示
function getPlaceholder(row) {
  let placeholder
  if (row.placeholder === false) {
    return ''
  } else if (row.placeholder) {
    placeholder = row.placeholder
  } else {
    if (row.type === 'input' || row.type === 'textarea') {
      placeholder = '请输入' + row.label
    } else if (
      row.type === 'select' ||
      row.type === 'time' ||
      row.type === 'date' ||
      row.type === 'select-model'
    ) {
      placeholder = '请选择' + row.label
    } else {
      placeholder = row.label
    }
  }

  return placeholder
}
// 绑定的相关事件
function handleEvent(event, data) {
  emits('handleEvent', event, data)
}
// 派发按钮点击事件
function handleClick(event, data) {
  emits('handleClick', event, data)
}

onMounted(() => {
  // 将form实例返回到父级
  emits('update:refObj', proxy.$refs.form)
})
</script>

<style lang="scss" scoped>
:deep(.el-radio.is-bordered.is-checked) {
  border-color: #6dc1a9;
}
.printTxt {
  margin-left: -12px;
}
.el-input-number--small {
  width: 100%;
}
.padding {
  padding: 0 !important;
}
</style>
